<template>
  <div class="repetition-rate-page">
    <Modal v-model="modalValue" width="1100" title="重复率字段详情" :mask-closable="false" footer-hide @on-cancel="onCancel">
      <div class="mb-20">
        <Row justify="space-between">
          <Col span="5" v-for="(it,i) in companyList" :key="i">
            <div
              class="modal-head"
              :class="{on: formData.repeatType === it.repeatType}"
              @click="onChangeTable(it.repeatType)"
            >
              <h4>{{ it.label }}</h4>
              <div class="data-box">
                <span class="num">{{ info[it.key + 'Count'] }}</span>
                <span class="grey">条</span>
                <span class="num">{{ info[it.key + 'Rate'] }}%</span>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <Table :columns="columns" :data="listData" height="500">
        <template slot-scope="{ row }" slot="construction">
          <span v-html="row.construction"></span>
        </template>
        <template slot-scope="{ row }" slot="projectName">
          <span v-html="row.projectName"></span>
        </template>
        <template slot-scope="{ row }" slot="owner">
          <span v-html="row.owner"></span>
        </template>
        <template slot-scope="{ row }" slot="projectAddress">
          <span v-html="row.projectAddress"></span>
        </template>
      </Table>
      <PageAtion
        v-if="formData.total"
        :total="formData.total"
        :size.sync="formData.size"
        :page.sync="formData.page"
        @pageSizeChange="pageSizeChange"
      />
    </Modal>
  </div>
</template>

<script>
import { busiInfoGetRepeatData } from '@/api/businessInformationManage.js'

export default {
  name: 'repetitionRateModal',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'Construction'
    },
    info: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    value: {
      // immediate: true, // 立即执行 :当刷新页面时会立即执行一次handler函数
      handler (val) {
        this.modalValue = val
        if (!val) return
        this.$nextTick(() => {
          this.init()
        })
      }
    },
    type: {
      handler (val) {
        this.formData.repeatType = val
      }
    },
  },
  data () {
    return {
      modalValue: false,
      columns: [
        {
          title: '施工方',
          key: 'construction',
          slot: 'construction',
          tooltip: true
        },
        {
          title: '项目名称',
          key: 'projectName',
          slot: 'projectName',
          tooltip: true
        },
        {
          title: '业主方',
          key: 'owner',
          slot: 'owner',
          tooltip: true

        },
        {
          title: '项目地址',
          key: 'projectAddress',
          slot: 'projectAddress',
          tooltip: true
        },
        {
          title: '预计产值规模(万元)',
          key: 'outputScale',
          width: 160,
        },
        {
          title: '发布时间',
          key: 'publishTime',
          width: 170,
        },
      ],
      listData: [],
      companyList: [
        { label: '施工方单位', key: 'constructionRepeat', repeatType: 'Construction' },
        { label: '业主方单位', key: 'ownerRepeat', repeatType: 'Owner' },
        { label: '项目名称', key: 'nameRepeat', repeatType: 'ProjectName' },
        { label: '项目位置', key: 'placeRepeat', repeatType: 'ProjectAddress' },
      ],
      currentIndex: 0,
      formData: {
        repeatType: 'Construction',
        page: 1,
        size: 10,
        total: 10,
      },
    }
  },
  methods: {
    // 初始化数据
    async init () {
      const request = {
        busiInfoId: this.info.busiInfoId,
        ...this.formData
      }
      const { data, page, size, total } = await busiInfoGetRepeatData(request)
      this.listData = data
      this.formData = { ...this.formData, ...{ page, size, total } }
    },
    onChangeTable (repeatType) {
      this.formData.repeatType = repeatType
      this.init()
      // 刷新table
    },
    onCancel () {
      this.$emit('input', false)
    },
    pageSizeChange () {
      this.init()
    },
  }
}
</script>

<style lang='less' scoped>
.mb-20 {
  margin-bottom: 20px;
}

.data-box {
  margin-top: 5px;
  .num {
    margin-right: 5px;
    font-size: 18px;
    font-weight: 500;
  }

  .grey {
    color: #7b8591;
    margin-right: 20px;
  }
}

.modal-head {
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  &.on {
    background-color: #e5f1ff;
  }
}
</style>
